
; (async function () {


  //点击切换地址生成弹框
  document.querySelector('.btn1').addEventListener('click', () => {
    //创建弹框
    creteDialog()

  })
  //给dialog绑定点击事件
  function bindDialog(ele) {
    let index
    ele.addEventListener('click', (e) => {
      //记录事件源
      let tar = e.target
      //判断点击的是canle或是close
      if (tar.classList.contains('cancle')
        || tar.classList.contains('close')
      ) {
        //删除弹框
        ele.remove()
      }
      if (tar.classList.contains('confirm')) {
        //删除弹框
        ele.remove()
        //重新渲染默认数据
        render()
      }

    });

    //给弹框下的每个地址div绑定点击事件 点击的div高亮
    [...ele.querySelector('.adressWrapper').children].forEach(item => {
      item.addEventListener('click', () => {
        //清除高亮
        document.querySelector('.adressWrapper .active') &&
          document.querySelector('.adressWrapper .active').classList.remove('active')
        //添加高亮
        item.classList.add('active')
        //更改默认地址数据 先获取数据
        let ind = item.dataset.index
        //拿到数据
        defaultAddress = { ...addressData[ind] }

      })

    })
  }

  //点击切换
  function myTab(eles, type, pclass) {
    eles.forEach(item => {
      item.addEventListener(type, () => {
        console.log(1111)
        document.querySelector(`.${pclass} .active`).classList.remove('active')
        item.classList.add('active')
      })
    })
  }
  myTab([...document.querySelector('.time').children], 'click', 'time')
  myTab([...document.querySelectorAll('.pay a')], 'click', 'pay')


  //渲染默认地址
  function render() {
    document.querySelector('.add_list').innerHTML = `
    <li><span>收&nbsp货&nbsp人:</span> ${defaultAddress.name}</li>
    <li><span>联系方式:</span>${defaultAddress.phone}</li>
    <li><span>收货地址:</span>${defaultAddress.address}</li>
    `
  }
  render()

  function creteDialog() {
    //创建弹框
    let dialog = document.createElement('div')
    dialog.classList.add('dialog')
    dialog.innerHTML = `
        <div class="dia_wrapper">
        <div class="dia_header">
          <h3>切换收货地址</h3>
          <a href="#" class="close icon toutiao icon-guanbi"></a>
        </div>
        <div class="dia_body">
          <div class="adressWrapper">
          ${addressData.map((item, ind) =>

      `<div class="address_item ${ind == 0 ? 'active' : ''}" data-index=${ind}>
              <ul>
              <li><span>收&nbsp货&nbsp人:</span>${item.name}</li>
              <li><span>联系方式:</span>${item.phone}</li>
              <li><span>收货地址:</span>${item.address}</li>
            </ul>
          </div>`
    ).join('')}

          </div>
        </div>
        <div class="dia_footer">
          <button class="cancle gray">取消</button>
          <button class="confirm primary">确定</button>
        </div>
    `
    //追加弹框
    document.body.appendChild(dialog)
    //把创建好的弹框传给函数
    bindDialog(dialog)
  }

  //本地存储渲染
  function render1() {
    let shopData = JSON.parse(localStorage.getItem('shopCarList')).filter(item => item.isSel) || []
    document.querySelector('tbody').innerHTML = shopData.map(item => {
      return `<tr>
              <td>
                <a href="#" class="info">
                  <img src="${item.picture}" alt="">
                  <div class="right">
                    <p>${item.desc}</p>
                    <p>${item.style}</p>
                  </div>
                </a>
              </td>
              <td>¥${item.price}</td>
              <td>${item.number}</td>
              <td>¥${item.price * item.number}</td>
              <td>¥${item.price * item.number}</td>
            </tr>`

    }).join('')
    //渲染金额明细
    const obj = shopData.reduce((prev, item) => {
      prev.num += +item.number
      prev.heji += +item.number * +item.price
      prev.yunfei += +item.number * 4
      prev.zongji += +item.number * +item.price + +item.number * 4
      return prev
    }, {
      num: 0,
      heji: 0,
      yunfei: 0,
      zongji: 0
    })
    // console.log(obj)
    document.querySelector('.de_total').innerHTML =
      `<dl>
        <dt>商品件数：</dt>
        <dd>${obj.num}件</dd>
      </dl>
      <dl>
        <dt>商品总价：</dt>
        <dd>¥${obj.heji}</dd>
      </dl>
      <dl>
        <dt>运<i></i>费：</dt>
        <dd>¥${obj.yunfei}</dd>
      </dl>
      <dl>
        <dt>应付总额：</dt>
        <dd class="price">¥${obj.zongji}</dd>
      </dl>`

    localStorage.setItem('total', obj.zongji)
  }
  render1()

  //点击send跳转
  document.querySelector('.send').addEventListener('click', () => {
    location.href = '../html/payment.html'
  })

})();
